<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>驴妈妈流立方</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/daterangepicker.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/dataTables.bootstrap.css"/>
    <!-- text fonts -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css"/>
    <!-- ace styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap-datetimepicker.min.css"/>

    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css"/>
    <!-- ace settings handler -->
    <script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css"/>
</head>

<body class="skin-2" style="background-color: #FFF;margin:0;padding: 0;width: 100%;height: 100%;">
<div class="page-content">
    <!-- <div class="page-header">
        <h1>
            日志查询
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                日志列表
            </small>
        </h1>
    </div> -->
    <div class="row">
        <div class="col-xs-12">
            <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                <div class="row">
                    <form class="form-inline" id="searchForm" method="post"
                          action="${rc.contextPath}/specialTopic/topicClickAll">
                        <div class="col-xs-3">
                            <div class="dataTables_length">
                                <label>查询时间
                                    <input type="text" class="form-control" name="chooseTime" value="${chooseTime!}"
                                           width="150px">
                                </label>
                            </div>
                        </div>
                        <div class="col-xs-3" style="display:none">
                            <div class="dataTables_length">
                                <label>code
                                    <input type="text" class="form-control" name="code" value="${code!}" width="150px">
                                </label>
                            </div>
                        </div>
                        <div class="col-xs-3" style="display:none">
                            <div class="dataTables_length">
                                <label>platform
                                    <input type="text" class="form-control" name="platform" value="${platform!}" width="150px">
                                </label>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            <div class="dataTables_length">
                                <button id="search" type="button" class="btn btn-pink btn-sm" style="display:none">
                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                    查询
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer"
                       role="grid" aria-describedby="dynamic-table_info">
                    <thead>
                    <tr>
                        <!--<th>序号</th>-->
                        <th>区域</th>
                        <th>导航栏名称</th>
                        <th>曝光量</th>
                        <th>tab名称</th>
                        <th>页面点击量(PV)</th>
                        <th>用户点击量(UV)</th>
                        <th>订单(个)</th>
                        <th>营收(元)</th>
                        <th>支付完成订单(个)</th>
                        <th>支付完成营收(元)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#if topicPVList?? && topicPVList?size&gt;0>
                        <#list topicPVList as topicPV>
                            <tr class="">
                                <!--<td></td>-->
                                <td>${topicPV.area!}</td>
                                <td>${topicPV.navName!}</td>
                                <td>${topicPV.slideNum!}</td>
                                <td>${topicPV.tabName!}</td>
                                <td>${topicPV.clickNum!0}</td>
                                <td>${topicPV.userClick!}</td>
                                <td>${topicPV.orderAmount!0}</td>
                                <td>${topicPV.orderMoney!0}</td>
                                <td>${topicPV.payAmount!0}</td>
                                <td>${topicPV.payMoney!0}</td>
                            </tr>
                        </#list>
                        <#else>
                            <tr>
                                <td colspan="12">
                                    <div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>
                                </td>
                            </tr>
                    </#if>
                    </tbody>
                </table>
                <#include "paginator.html">
            </div>
        </div>
    </div>
</div>
<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='${rc.contextPath}/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="${rc.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>

<!-- ace scripts -->
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<!-- user scripts -->
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${rc.contextPath}/javascripts/dataTable-common.js"></script>
<script src="${rc.contextPath}/javascripts/jquery.dataTables.min.js"></script>
<script src="${rc.contextPath}/javascripts/dataTables.bootstrap.min.js"></script>
<script src="${rc.contextPath}/javascripts/resetIframeHeight.js"></script>

<script type="text/javascript">
    //    d3.select(self.frameElement).style("height", "800px");

    $(function () {
        MergeCell('dynamic-table', 1, 0, 0);
//        A('dynamic-table', 1);
    })

    function MergeCell(tableId, startRow, endRow, col) {
        var tb = document.getElementById(tableId);
        if (col >= tb.rows[0].cells.length) {
            return;
        }
        //当检查第0列时检查所有行
        if (col == 0 || endRow == 0) {
            endRow = tb.rows.length - 1;
        }

        for (var i = startRow; i < endRow; i++) {
            //程序是自左向右合并
            if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
                //如果相同则删除下一行的第0列单元格
                tb.rows[i + 1].cells[col].style.display = 'none';
                //更新rowSpan属性
                tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
                //当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
                if (i == endRow - 1 && startRow != endRow) {
                    MergeCell(tableId, startRow, endRow, col + 1);
                }
            } else {
                //起始行，终止行不变，检查下一列
                MergeCell(tableId, startRow, i, col + 1);
                //增加起始行
                startRow = i + 1;
            }
        }
    }

    function A(tableId, col) {
        var tb = document.getElementById(tableId);
        var rows = [];
        var nodes = [];
        for (var i = 1; i < tb.rows.length; i++) {
            nodes.push(tb.rows[i].cells[col]);
        }
        nodes.each(function (cell, i) {
            if (i != 0) {
                if ($(cell).text() == $(nodes[i - 1]).text()) {
                    var row = rows.pop();
                    rows.push({
                        cell: cell,
                        rowspan: row.rowspan + 1,
                    });
                } else {
                    rows.push({
                        cell: cell,
                        rowspan: 1,
                    });
                }
            } else {
                rows.push({
                    cell: cell,
                    rowspan: 1,
                });
            }
        });
        var index = 0;
        $(rows).each(function (cell, item) {
            $(nodes[index]).attr('rowspan', item.rowspan);
            for (var i = 1; i < item.rowspan; i++) {
                $(nodes[index + i]).remove();
            }
            index += item.rowspan;
        });

    }

</script>
</body>
</html>